<template>
	<div class="hello">
		<div class="wrapper" ref="wrapper">
			<ul class="main">
				<li v-for="(item, index) in newArr" :key="index">{{item}}</li>
				<div class="loading" v-show="!loading">加载中....</div>
			</ul>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
	name: 'HelloWorld',
	data () {
		return {
			newArr:0,
			loading:true,
		}
	},
    created() {
    },
	methods:{
		axios(){
			console.log(Promise);
			
			return new Promise(function (resolve) {
				setTimeout(()=>{
					resolve('完成了')
				},1000)
			})
		},
		finishPullDown(){
			this.axios().then(res=>{
				console.log(res);
				this.newArr = 40
				this.$nextTick(() => {
					if (!this.scroll) {
						this.scroll = new BScroll('.wrapper', {
							pullDownRefresh: {
								threshold: 80,
								stop: 51
							}
						})
						this.scroll.on('touchEnd', (pos) => {
							// 下拉动作
							if (pos.y > 50) {
								this.finishPullDown()
							}
							if(pos.y <= (this.scroll.maxScrollY + 100) && this.loading) {
								this.loading = false
								this.axios().then(res=>{
									console.log(12321312);
									this.loading = true
								})
							}
						})
					}else{
						this.scroll.refresh()
					}
				})
			})
		}
	},
	mounted() {
		this.finishPullDown()
	},
}
</script>
<style scoped>
.wrapper{
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.loading{
	position: fixed;
	left: 0;bottom: 0;
	width: 100%;
	height: 20px;
	text-align: center;
}
</style>
